import { apiStore } from '@/utils/store/apiStore'
import { useConfigStore } from '@/utils/store/configStore'
import { Dropdown, Menu, PageHeader, Switch } from '@arco-design/web-react'
import { IconDown, IconExport, IconImport } from '@arco-design/web-react/icon'
import { useState } from 'react'
import GroupList, { IGroupListRef } from './views/GroupList'
import ExportModal from './views/ImportExport/Export/ExportModal'
import { checkExistImFromYapiPage } from './views/ImportExport/Import/ImFromYapiPage'
import ImportModal from './views/ImportExport/Import/ImportModal'

function App() {
    // 插件配置
    const [config, setConfig] = useConfigStore({})
    // 导入分组数据
    const [importModalVisible, setImportModalVisible] = useState(false)
    // 导出分组数据
    const [exportModalVisible, setExportModalVisible] = useState(false)
    // groupList ref
    const groupListRef = useRef<IGroupListRef | null>(null)

    // 检查一下是否存在从yapi页面导入
    useEffect(() => {
        // 获取query参数
        const query = new URLSearchParams(window.location.search)
        const apiId = query.get('apiId')
        if (apiId) {
            apiStore.getListItem(apiId).then((item) => {
                if (!item || item?.type !== 'api') return
                groupListRef.current?.setEditingApi(item)
                // 从query参数中删除apiId
                query.delete('apiId')
                window.history.replaceState(null, '', window.location.pathname)
            })
        }
        checkExistImFromYapiPage().then((exist) => {
            if (!exist) return
            setImportModalVisible(true)
        })
    }, [])

    return (
        <>
            <PageHeader
                style={{ background: 'var(--color-bg-2)' }}
                title={
                    <div>
                        Mock Response{' '}
                        <Switch
                            className='ml-2'
                            checked={config?.enabled}
                            onChange={(v) =>
                                setConfig({ ...config, enabled: v })
                            }
                        />
                    </div>
                }
                extra={
                    <Dropdown.Button
                        onClick={() => setImportModalVisible(true)}
                        trigger='click'
                        droplist={
                            <Menu>
                                <Menu.Item
                                    onClick={() => setExportModalVisible(true)}
                                    key='1'
                                    className='flex items-center w-[100px] h-[26px]'
                                >
                                    <IconExport
                                        fontSize={16}
                                        className='mr-2'
                                    />
                                    导出
                                </Menu.Item>
                            </Menu>
                        }
                        icon={<IconDown />}
                    >
                        <IconImport /> 导入
                    </Dropdown.Button>
                }
            />
            <div className='root-group-list p-4'>
                <GroupList groupListRef={groupListRef} />
            </div>
            {/* 导入分组对话框 */}
            <ImportModal
                visible={importModalVisible}
                onCancel={() => setImportModalVisible(false)}
                onNeedUpdate={() => {
                    groupListRef?.current?.updateApiItems()
                    groupListRef?.current?.updateGroupData()
                }}
            />
            {/* 导出分组对话框 */}
            <ExportModal
                visible={exportModalVisible}
                onCancel={() => setExportModalVisible(false)}
            />
        </>
    )
}

export default App
